<template>
    <Transition name="slide-fade">
        <div v-show="data.isVisible">
            <div class="content">
                <Player v-if="data.videoSource" class="h-full w-full" controls :src="data.videoSource" ref="videoRef"></Player>
            </div>
            <div class="title">
                {{ data.videoSource?.devicePlace ?? '无标题' }}
            </div>
            <img src="./assets/close.svg" alt="" class="close" @click="close">
        </div>
    </Transition>
</template>

<script setup lang="ts">
import { reactive, ref, nextTick } from 'vue';
import { VideoSource } from '../监控视频/api';
import Player from '../监控视频/Player.vue';

const data = reactive({
    videoSource: undefined as VideoSource | undefined,
    isVisible: false
})
const videoRef = ref<InstanceType<typeof Player>>()

function play(source: VideoSource) {
    data.isVisible = true
    data.videoSource = source
    nextTick(() => videoRef.value?.play())
}

function stop() {
    videoRef.value?.stop()
}

function close() {
    data.isVisible = false
    videoRef.value?.stop()
}

defineExpose({
    play, stop, close
})

</script>

<style scoped>
.title {
    position: absolute;
    top: 0;
    left: 0;
    width: 356px;
    height: 53px;

    background-image: url(./assets/title.svg);

    font-weight: 500;
    font-size: 24px;
    line-height: 53px;
    color: #01C2FF;
    text-align: center;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 8px;
}

.close {
    position: absolute;
    top: 42px;
    right: 0;
    width: 43px;
    height: 31px;
    transition-property: opacity drop-shadow;
    transition-duration: 250ms;
}
.close:hover {
    filter: drop-shadow(0 0 2px #59ABFF);
    transition-duration: 0ms;
}
.close:active {
    opacity: 0.5;
    transition-duration: 0ms;
}

.content {
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(./assets/bg.svg);

    padding: 21px 12px 12px 12px;
}
</style>